<template>
  <div class="role-control">
    <el-dialog title="角色管理" :visible="dialogTableVisible" @close="cancel">
      <el-checkbox-group v-model="Ids">
        <el-checkbox :label="item.id" v-for="item in chekList" :key="item.id">
          {{ item.name }}</el-checkbox
        >
      </el-checkbox-group>
      <el-row type="flex" justify="center" style="margin-top:20px">
        <el-button type="primary" @click="saveRole">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// 导入接口
import { getAllRole } from '@/api/setting'
import { getMoreUserInfo } from '@/api/user'
import { setRole } from '@/api/employees'
export default {
  name: 'roleControl',
  data () {
    return {
      Ids: [],
      chekList: []
    }
  },
  props: {
    dialogTableVisible: {
      type: Boolean,
      default: true
    },
    userId: {
      type: String,
      default: '',
      required: true
    }
  },
  // 请求数据,绑定复选框
  methods: {
    async getAllRole () {
      let res = await getAllRole({ page: 1, pagesize: 9999 })
      this.chekList = res.data.rows
    },
    // 获取该员工所拥有的角色
    async getMoreUserInfo (id) {
      let res = await getMoreUserInfo(id)
      this.Ids = res.data.roleIds
    },
    // 取消按钮
    cancel () {
      this.Ids = []
      this.$emit('update:dialogTableVisible', false)
    },
    // 确认修改按钮
    async saveRole () {
      let res = await setRole({ id: this.userId, roleIds: this.Ids })
      // 提示修改成功,
      this.$message.success('权限修改成功')
      // 关闭弹框
      this.$emit('update:dialogTableVisible', false)
    }
  },
  created () {
    this.getAllRole()
  }
}
</script>

<style></style>
